<template>
  <div id="visitorAudit">
    <div class="dev-nav">
      <p>访客审核</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>出入管理</el-breadcrumb-item>
        <el-breadcrumb-item>访客管理</el-breadcrumb-item>
        <el-breadcrumb-item>访客审核</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="search">
      <el-input
        v-model="input1"
        placeholder="访客姓名"
        style="width: 150px"
      ></el-input>
      <el-input v-model="input2" placeholder="手机号码"></el-input>
      <el-input v-model="input3" placeholder="证件号码"></el-input>
      <el-input v-model="input4" placeholder="车牌号码"></el-input>
      <el-select v-model="appStatusValue" filterable placeholder="申请状态">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <!-- 日历 -->
      <div class="block">
        <!-- <span class="demonstration">默认</span> -->
        <el-date-picker
          class="block-content"
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <!-- 查询 -->
      <el-button
        type="success"
        style="background-color: #0bb197"
        @click="inquire"
      >
        <i class="el-icon-search"></i>
        查询</el-button
      >
      <el-button
        type="success"
        plain
        style="margin-right: 0px"
        class="reset"
        @click="reset"
      >
        <i class="el-icon-refresh"></i>
        重置</el-button
      >
    </div>
    <!-- 表格内容 -->
    <div class="dev-content">
      <div class="dev-content-left">
        <p>查询结果列表</p>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="id" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column
            prop="auditNumber"
            label="申请编号"
            width="90"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="visitorsName" label="访客姓名" align="center">
          </el-table-column>
          <el-table-column prop="visitorsPhone" label="手机号码" align="center">
          </el-table-column>
          <el-table-column prop="idCard" label="证件号码" align="center">
          </el-table-column>
          <el-table-column prop="carNumber" label="车牌号码" align="center">
          </el-table-column>
          <el-table-column label="预约来访时间" width="150" align="center">
            <template slot-scope="scope">
              <span>{{ timeTrans(scope.row.appointmentTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="auditStatus" label="状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.auditStatus == 0">待审核</span>
              <span v-if="scope.row.auditStatus == 1">审核已通过</span>
              <span v-if="scope.row.auditStatus == 2">审核未通过</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="details(scope.row)"
                type="text"
                size="small"
                style="color: #0bb197"
                >详情</el-button
              >
              <el-button
                @click="userAuditing(scope.row)"
                type="text"
                size="small"
                style="color: #0bb197"
                >{{ scope.row.auditStatus == 0 ? "审核" : "" }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :background="true"
          class="msg-pagination-container"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="count"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 内容区右边的东西 -->
      <div class="dev-content-right">
        <div class="right-top">
          <div class="right-title">
            <i class="el-icon-s-order"></i>
            <h3>预约情况</h3>
          </div>
          <div class="right-top-content">
            <div class="item-top">
              <div class="item">
                <div class="items-title">今天预约数</div>
                <div class="items-content">{{ orderCount }}</div>
              </div>
              <div class="item" style="margin-right: 0px">
                <div class="items-title">正在拜访数</div>
                <div class="items-content">{{ comingCount }}</div>
              </div>
            </div>
            <div class="item-bottom">
              <div class="item" style="margin-bottom: 0px">
                <div class="items-title">已签离数</div>
                <div class="items-content">{{ leavingCount }}</div>
              </div>
              <div class="item" style="margin: 0px">
                <div class="items-title">预约未到访</div>
                <div class="items-content">{{ uncomeCount }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-bottom">
          <div class="right-title">
            <i class="el-icon-s-home"></i>
            <h3>即将到访记录</h3>
            <div class="title-num">{{ visitorData.length }}</div>
          </div>
          <div class="right-content">
            <el-table :data="visitorData" height="280px" style="width: 100%">
              <el-table-column width="45" align="center">
                <!-- 这是个头像 -->
                <template slot-scope="scope">
                  <img :src="scope.row.avatar" />
                </template>
              </el-table-column>
              <el-table-column
                prop="visitorName"
                label="到访人"
                width="72"
                align="center"
              >
              </el-table-column>
              <el-table-column label="时间" align="center" width="65">
                <template slot-scope="scope">
                  <span>{{ timeTrans(scope.row.time).slice(11, 16) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="visitedName"
                width="72"
                label="被访人"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户审核弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="30%" center>
      <span center style="display: block; text-align: center"
        >是否确认用户{{ this.userAuditingText }}门禁申请认证？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="reviewRejection" style="background-color: #ccc"
          >审核驳回</el-button
        >
        <el-button
          type="primary"
          @click="approve"
          style="background-color: #0bb197"
          >审核通过</el-button
        >
      </span>
    </el-dialog>

    <!-- 详情弹窗 -->
    <div class="detail-pop">
      <el-dialog
        title="详细信息"
        :visible.sync="detailDialog"
        width="43%"
        class="detail"
      >
        <div class="detail-content">
          <div class="detail-content-left">
            <ul class="detail-content-ul">
              <li>
                <span>申请编号：</span
                ><span>{{ detailShowData.auditNumber }}</span>
              </li>
              <li>
                <span>手机号码：</span
                ><span>{{ detailShowData.visitorsPhone }}</span>
              </li>
              <li>
                <span>车牌号码：</span
                ><span>{{ detailShowData.carNumber }}</span>
              </li>
              <li>
                <span>被访人姓名：</span
                ><span>{{ detailShowData.intervieweesName }}</span>
              </li>
              <li>
                <span>被访人手机号码：</span
                ><span>{{ detailShowData.intervieweesPhone }}</span>
              </li>
            </ul>
          </div>
          <div class="detail-content-right">
            <ul class="detail-content-ul">
              <li>
                <span>访客姓名：</span
                ><span>{{ detailShowData.visitorsName }}</span>
              </li>
              <li>
                <span>证件号码：</span><span>{{ detailShowData.idCard }}</span>
              </li>
              <li>
                <span>预约来访时间：</span
                ><span>{{ detailShowData.appointmentTime }}</span>
              </li>
              <li>
                <span>所属部门：</span><span>{{ detailShowData.dept }}</span>
              </li>
              <li>
                <span>审核状态：</span>
                <span v-if="detailShowData.auditStatus == 0">待审核</span>
                <span v-if="detailShowData.auditStatus == 1">审核已通过</span>
                <span v-if="detailShowData.auditStatus == 2">审核未通过</span>
              </li>
            </ul>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import time from "../utils/time";
export default {
  mixins: [time],
  data() {
    return {
      page: 1,
      count: 5,
      total: 1,
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      tableData: [],
      visitorData: [],
      //  日历
      value1: [],
      startTime: "",
      endTime: "",
      //   申请状态
      options: [
        {
          value: 0,
          label: "待审核",
        },
        {
          value: 1,
          label: "审核已通过",
        },
        {
          value: 2,
          label: "审核未通过",
        },
      ],
      appStatusValue: "",
      // 审核弹窗
      dialogVisible: false,
      // 审核弹窗内容
      userAuditingText: "",
      // 分页
      page: 1,
      // 详情
      detailDialog: false,
      // 详情页数据
      detailShowData: {
        auditNumber: "",
        visitorsPhone: "",
        carNumber: "",
        visitorsName: "",
        idCard: "",
        appointmentTime: "",
        auditStatus: "",
        dept: "", //所属部门
        intervieweesName: "", // 被访人姓名
        intervieweesPhone: "", //被访人手机号
      },
      // 右边的卡片
      orderCount: "",
      comingCount: "",
      leavingCount: "",
      uncomeCount: "",
    };
  },
  methods: {
    handleSizeChange(val) {
      this.count = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },

    userAuditing(items) {
      console.log(items);
      this.dialogVisible = true;
      this.userAuditingText = items.id;
    },
    // 渲染
    getData() {
      this.value1[0] && (this.startTime = this.timeTrans(this.value1[0]));
      this.value1[1] && (this.endTime = this.timeTrans(this.value1[1]));
      this.$axios({
        url: "/smart/audit/list",
        method: "get",
        params: {
          pageNum: this.page,
          pageSize: this.count,
          visitorName: this.input1,
          phone: this.input2,
          idCard: this.input3,
          carNum: this.input4,
          applyStatus: this.appStatusValue,
          startTime: this.startTime,
          endTime: this.endTime,
        },
      }).then(({ data }) => {
        // console.log("啦啦啦啦", data);
        if (data.code == 2000) {
          this.tableData = data.data.list;
          this.total = data.data.total;
          this.visitorData = data["coming-visitors"];
          this.orderCount = data.orderCount;
          this.comingCount = data.comingCount;
          this.leavingCount = data.leavingCount;
          this.uncomeCount = data.uncomeCount;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },

    // 查询
    inquire() {
      // alert("还没有查询接口");
      this.getData();
    },

    // 重置
    reset() {
      this.input1 = "";
      this.input2 = "";
      this.input3 = "";
      this.input4 = "";
      this.appStatusValue = "";
      this.value1 = [];
      this.startTime="";
      this.endTime="";
      this.getData();
      this.$message.success("重置成功");
    },
    // 详情
    details(val) {
      // alert("还没有详情页");
      this.detailDialog = true;
      // console.log(val);
      this.detailShowData = val;
    },
    // 审核通过
    approve() {
      this.dialogVisible = false;
      this.$axios({
        url: "/smart/audit/edit",
        method: "put",
        data: {
          id: this.userAuditingText,
          auditStatus: 1,
        },
      }).then(({ data }) => {
        if (data.code == 2000) {
          this.getData();
          this.$message.success("审核已通过");
        }
      });
    },
     // 审核驳回
     reviewRejection(){
      this.dialogVisible = false
      this.$axios({
        url: "/smart/access-control/edit",
        method: "put",
        data: {
          applyId: this.userAuditingText,
          applyStatus: 2,
        },
      }).then(({ data }) => {
        if (data.code == 2000) {
          this.getData();
          this.$message.success("审核已驳回");
        }
      });
    }
  },
  mounted() {
    this.getData();
  },
};
</script>


<style lang="less" scoped>
#visitorAudit {
  // width: 100%;
  padding: 20px;
  //   background-color: #f3f3f4;
  //   border: 1px solid red;
  .dev-nav {
    display: flex;
    justify-content: space-between;
  }
  p {
    font-size: 18px;
    margin: 0;
  }
  .search {
    // width: 100%;
    margin: 20px 0px;
    padding: 20px 15px;
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 8px;
    .reset {
      background-color: white;
      color: #c0c4cc;
      border: 1px solid #c0c4cc;
    }
    .reset:hover {
      color: #0bb197;
    }
    .el-input {
      width: 150px;
      margin-right: 10px;
    }
    .el-select {
      margin-right: 10px;
    }
    .block {
      margin-right: 10px;
      .block-content {
        width: 310px;
      }
    }
    .el-button {
      padding: 10px 15px;
      margin-left: 0px;
      margin-right: 20px;
    }
  }
  .dev-content {
    padding-bottom: 30px;
    display: flex;
    .dev-content-left {
      flex: 1;
      padding: 20px 15px;
      border-radius: 8px;
      background-color: white;
      p {
        font-size: 16px;
        margin-bottom: 10px;
      }
      .el-pagination {
        text-align: end;
        margin-top: 20px;
        margin-left: 5px;
      }
    }
    .dev-content-right {
      width: 319px;

      .right-top {
        margin-left: 10px;
        padding: 0px 15px;
        border-radius: 8px;
        background-color: white;
        margin-bottom: 10px;
        box-sizing: border-box;
      }
      .right-bottom {
        margin-left: 10px;
        padding: 0px 15px;
        border-radius: 8px;
        background-color: white;
        box-sizing: border-box;
      }

      .right-title {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 2px dashed #0bb197;
        i {
          font-size: 18px;
          color: #0bb197;
        }
        h3 {
          font-size: 16px;
          margin: 0 8px;
        }
        .title-num {
          width: 24px;
          height: 16px;
          font-size: 16px;
          text-align: center;
          line-height: 16px;
          background-color: red;
          color: white;
          border-radius: 12px/8px;
        }
      }
      .right-content {
        width: 100%;
        height: 300px;
        // overflow: hidden;
      }
    }
  }
}

.detail-content-left {
  flex: 1;
  margin-right: 70px;
  .detail-content-ul li {
    height: 40px;
    margin: 15px 0px;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.detail-content-right {
  flex: 1;
  .detail-content-ul li {
    height: 40px;
    margin: 15px 0px;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

// .right-top-content {
//   height: 300px;
// }

// 预约情况
.right-top-content {
  padding: 20px 10px;

  .item-top,
  .item-bottom {
    display: flex;
  }
  .item {
    width: 126px;
    margin-bottom: 20px;
    border: 1px solid #0bb197;
    margin-right: 20px;
    text-align: center;
    .items-title {
      height: 33px;
      line-height: 33px;
      font-size: 16px;
      color: white;
      background-color: #0bb197;
    }
    .items-content {
      height: 90px;
      line-height: 90px;
      font-size: 30px;
      font-weight: 500;
      color: #0bb197;
      box-shadow: 0 0 8px #0bb197;
    }
  }
}
</style>

<style lang="less">
.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
  /*当前选中页数的样式进行修改*/
  background-color: #0bb197;
  color: #fff;
}

/* 详情弹窗 */
.dev-content-right .cell > img {
  width: 30px;
  height: 100%;
}
.detail-pop {
  .el-dialog__header {
    background-color: #0bb197;
    padding: 10px 20px;
  }
  .el-dialog__title {
    color: white;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: white;
    font-size: 18px;
  }
  .el-dialog__headerbtn {
    top: 15px;
  }
  .detail-content {
    display: flex;
    justify-content: space-between;
  }
  .el-dialog__body {
    padding: 0px 20px;
  }
}
</style>